<template>
  <section class="daily-message-config">

    <div class="left-title">
      <h4>展示字段
        <el-tooltip placement="top">
          <div slot="content">
            <template v-for="item in sysDisplayFieldCheckMap">
              <div :key="item.key">{{item.value}}{{item.desc}}</div>
            </template>
          </div>
          <i class="iconfont icon-question-circle"></i>
        </el-tooltip>
      </h4>
      
      <div 
        class="field-name"
        v-for="item in sysDisplayFieldCheckMap"
        :key="item.key"
      >
        {{item.value}}
      </div>
    </div>


    <div class="center-checkbox">
      <h4>消息中心({{messageCheck.length}}/3)</h4>
      <el-checkbox-group v-model="messageCheck">
        <el-checkbox
          @change="(val) => {messageChangeHandle(item.key,val)}"
          v-for="item in sysDisplayFieldCheckMap"
          :key="item.key"
          :label="item.key"
        >{{item.value}}
        </el-checkbox>   
      </el-checkbox-group>
    </div>


    <div class="right-checkbox">
      <h4>详情展示</h4>
      <el-checkbox-group v-model="detailCheck">
        <el-checkbox
          v-for="item in sysDisplayFieldCheckMap"
          :key="item.key"
          :label="item.key"
        ></el-checkbox>
      </el-checkbox-group>
    </div>
  </section>
</template>

<script>
export default {
  // 系统模版预览模块
  name:'sys-template-operate-daily',

  props:{
    // 所有的展示字段列表
    sysDisplayFieldCheckMap:{
      type:Array,
      required:true
    },

    // 消息中展示的字段
    sysCheckKeyMap:{
      type:Array,
      required:true
    },

    // 在详情中展示的字段
    sysDetailCheckKeyMap:{
      type:Array,
      required:true
    }
  },

  computed:{
    messageCheck:{
      get(){
        return this.sysCheckKeyMap;
      },

      set(val){
        this.$emit('update:sysCheckKeyMap', val)
      }
    },

    detailCheck:{
      get(){
        return this.sysDetailCheckKeyMap;
      },

      set(val){
        this.$emit('update:sysDetailCheckKeyMap', val)
      }
    },
  },

  mounted(){
  },

  methods:{

    // 当勾选了消息中心这一列对应的值，详情展示这一列也同步勾选上，（只有该项选中时需要联动）
    messageChangeHandle(key, val){

      if(val && this.messageCheck.length >= 3){
        this.messageCheck = this.messageCheck
        this.$message.warning('最多选择3个字段');
        return
      }
      
      if(!val || this.detailCheck.includes(key)) return;

      this.detailCheck.push(key)
    },
  }
}
</script>


<style lang="scss" scoped>
.daily-message-config{
  display: flex;
  justify-content: space-between;
  .left-title{
    width:170px;
    
  }
  .left-title,.center-checkbox,.right-checkbox{
    h4{
      font-size: 14px;
      color: #262626;
      line-height: 22px;
    }
  }
  .center-checkbox,.right-checkbox{
    width:95px;
    ::v-deep .el-checkbox__label{
        display: none;
    }
  }
  .right-checkbox{
    width:60px;
  }

  .field-name{
    line-height: 22px;
    height:22px;
    font-size: 14px;
    font-weight: 400;
    color: #595959;
    margin-bottom:6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    &:last-child{
      margin:0;
    }
  }
  .center-checkbox,.right-checkbox{
    .el-checkbox{
      display: block;
      height:22px;
      margin-bottom:6px;
      &:last-child{
        margin:0;
      }
    }
  }
  

  .icon-question-circle{
    margin-left:9px;
    color:#595959;
    cursor: pointer;
  }
}
</style>
